<template>
  <div id="main-detail">
    <div class="detail-box">
      <detail-header>
        <p slot="detail-tit">{{title1}}</p>
        <span slot="detail-name" >{{company1}}</span>
        <span slot="detail-date">发布于{{date1}}</span>
       <span class="main-detail-btnbox" slot="detail-btn"> <Button type="info" @click="beclick">{{message1}}</Button></span>
        <p slot="detail-content">{{content1}}</p>
      </detail-header>
    </div>
  </div>
</template>
<script>
import DetailHeader from '../../common/detail/DetailHeader.vue';
import HeaderBar from '../../common/detail/HeaderBar.vue';
import AlgoDetailItem from './AlgoDetailItem.vue';
export default {
  name:'MainDetail',
  data(){
    return {
      id:null
    }
  },
  props:{
      title1:String,
      date1:String,
      company1:String,
      content1:String,
      message1:String
  },
  components:{
    DetailHeader,
    HeaderBar,
    AlgoDetailItem
  },
  methods:{
   beclick(){
     this.$emit('btnclick');
   }
  }
}
</script>
<style>
#main-detail .detail-tit{
  font-size: 22px;
  margin-bottom: 2%;
}
#main-detail .detail-name,
#main-detail .detail-date{
  display: inline-block;
  margin-right: 1rem;
  font-size: 12px;
  color: #969bab;
}
#main-detail .detail-btn{
position: absolute;
top: 0;
right: 0;
}
#main-detail .ivu-btn-info,
#main-detail .ivu-btn-info:active,
#main-detail .ivu-btn-info:focus{
  background-color: #8c30f5;
  border-color: #8c30f5;
}

#main-detail .detail-content{
  font-size: 15px;
  margin: 4% 0;
  
}
#main-detail .main-detail-btnbox{
  position: relative;
  top: 0;
  left: 0;
}
</style>